<div class="page-title">
  <h2><?=$title?></h2>
</div>
<input type="hidden" value="<?php echo $this->uri->segment(4); ?>" id="sales_group_leader">
<table class='general' style="width:100%; margin: 0 0px 10px 0px">
  <thead>
    <tr>
      <th style="text-align: left" width="50%">Nama</th>
      <th style="text-align: left" width="50%">Territory</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px"><?php echo $username[0]->user_id.' | '.$username[0]->user_name ; ?></td>
      <td style="padding: 8px"><?php echo $region.' '.$cluster; ?></td>
    </tr>
  </tbody>
</table>

<table class="item-list">
  <tbody>
    <tr>
      <td>Nama Sales</td>
      <td>
        <select name="sales_name" id="sales-name">
          <option value=""></option>
          <?php 
            foreach ($sales as $key) {
              echo '<option value="'.$key->user_id.';'.$key->user_group_id.'">'.$key->user_id.' | '.$key->user_name.' | '.$key->user_group_caption.'</option>';
            }
          ?>
        </select> Optional
        <input class="spv_id" id="cc" type="hidden" value="<?php echo $username[0]->user_id.';'.$username[0]->user_group_id ; ?>" >
      </td>
    </tr>
    
    <tr>
      <td>Mobile Selling</td>
      <td>
        <input type="radio" value="2" name="mobsell" id="ya" />
        <label for="ya">Ya</label>
        <input type="radio" value="1" name="mobsell" id="tidak" checked="checked" />
        <label for="tidak">Tidak</label>
      </td>
    </tr>
   
    <tr>
      <td>Tipe Journey Cycle</td>
      <td>
        <select name="jc_type" id="jc-type">
          <option value="Kunjungan Agent">Kunjungan Agent</option>
          <option value="Pendampingan DS">Pendampingan DS</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Pilih Tanggal</td>
      <td><input type="text" readonly="readonly" class="datepicker" id="datepicker" value="<?php echo date('Y-m-j'); ?>"></td>
    </tr>
    
    <tr>
      <td>Nama / ID Outlet</td>
      <td><input type="text" class="keyword" id="keyword" placeholder="Nama Outlet/ID Outlet (Optional)" size="50"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" style="text-align: right;">
        <button id="show-jc">Tampilkan</button>
      </td>
    </tr>
  </tfoot>
</table>


  <div class="clear"></div>

  <div class="journey">
    <!-- the journey appeared here -->
  </div>
  
  
<script type="text/javascript">
$(document).ready(function() {
  $( "#datepicker" ).datepicker({
    showOn: "button", minDate: "0W",
    showWeek: true, dateFormat: 'yy-mm-d',
    buttonImage: "<?php echo base_url('file/images/table.png'); ?>",
    buttonImageOnly: true
  });

  $('input, select').change( function() { $('.journey').empty(); });

  // ================================================================================= //

  $("button#show-jc").click(function(){
    $('.journey').html('');

    var uri      = $('#sales_group_leader').val();
    var spv_id   = $('input.spv_id').val();
    var sales_id = $('select#sales-name').val();
    var jc_type  = $('select#jc-type').val();
    var date     = $('#datepicker').val();
    var keyword  = $('input.keyword').val();
    var show_jc  = true;
    // disabeled by request of Burhan
    var mobsel   = $('input[checked]:radio').val();
    // so dose this codes below, diabled due to the DOM were disabled too (by request of Burhan)
    // if(mobsel == '2')
    //   { 
    //     var sales_group = sales_id.split(';');
    //     if(sales_group[1] != '31')
    //       { 
    //         alert('Sales yang Anda pilih bukan SGS');
    //         var show_jc = false; 
    //       }
    //   }

    if(jc_type == 'Pendampingan SFA' ) {
      if (sales_id == '' ) {
        alert('Anda tidak memilih nama SFA');
        var show_jc = false;
      }
    }
    if(!$('#datepicker').val()) {
      alert('Tanggal tidak boleh kosong');
      var show_jc = false;
    }

    if(show_jc) {
      $.post(
        '<?php echo base_url(); ?>index.php/jc/journey_spv',
        {sales_id:sales_id, spv_id:spv_id, date:date, jc_type:jc_type, keyword:keyword, uri:uri, mobsel:mobsel},
        function(data) {
          var x = JSON.parse(data);
          $('.journey').html(x.journey_summary);
          // $('.humanized').html(x.humanized);
        }
      );
    }

  });

});

  function simpan(param) {
    // alert(param);
    var sales_name     = $('#sales-name').val().split(';');
    if(sales_name == '') { 
      var sales_id = $(':checkbox#'+param).parent().parent().attr('class');
    }
    else {
      var sales_id = sales_name[0];
    }


    var id_attr      = param.split('_');
    var channel_id   = id_attr[0];
    var territory_id = id_attr[1];
    var yyyymm       = id_attr[2];
    var day          = id_attr[3];
    var jc_type      = $('#jc-type').val();
    var spv_id       = $('.spv_id').val().split(';');
    var nilai        = $(':checkbox#'+param).is(':checked');

    $.post(
      '<?=base_url("index.php/jc/save_jc/4")?>', 
      {user_id:spv_id[0], channel_id:channel_id, territory_id:territory_id, month:yyyymm, day:day, nilai:nilai, jc_type:jc_type, sales_id:sales_id },
      function(data) {
        $(".pesan").html(data.messege).fadeIn(1000).fadeOut(1000);
      },
      "json"
    );
  }

</script>